import "./cityselect.css";
/**
 * @namespace VCity
 * @example
 * new VCity.CitySelector(
            { input: "selectCityInSearch" },
            { onChange: updateCity, noInput: true, offsetLeft: -150 }
        );
 * */
var VCity = {};
/* *
 * 静态方法集
 * @name _m
 * */
VCity._m = {
    /* 选择元素 */
    $: function(arg, context) {
        var tagAll,
            n,
            eles = [],
            i,
            sub = arg.substring(1);
        context = context || document;
        if (typeof arg == "string") {
            switch (arg.charAt(0)) {
                case "#":
                    return document.getElementById(sub);
                    break;
                case ".":
                    if (context.getElementsByClassName)
                        return context.getElementsByClassName(sub);
                    tagAll = VCity._m.$("*", context);
                    n = tagAll.length;
                    for (i = 0; i < n; i++) {
                        if (tagAll[i].className.indexOf(sub) > -1)
                            eles.push(tagAll[i]);
                    }
                    return eles;
                    break;
                default:
                    return context.getElementsByTagName(arg);
                    break;
            }
        }
    },

    /* 绑定事件 */
    on: function(node, type, handler) {
        node.addEventListener
            ? node.addEventListener(type, handler, false)
            : node.attachEvent("on" + type, handler);
    },

    /* 获取事件 */
    getEvent: function(event) {
        return event || window.event;
    },

    /* 获取事件目标 */
    getTarget: function(event) {
        return event.target || event.srcElement;
    },

    /* 获取元素位置 */
    getPos: function(node) {
        var scrollx =
                document.documentElement.scrollLeft || document.body.scrollLeft,
            scrollt =
                document.documentElement.scrollTop || document.body.scrollTop;
        var pos = node.getBoundingClientRect();
        return {
            top: pos.top + scrollt,
            right: pos.right + scrollx,
            bottom: pos.bottom + scrollt,
            left: pos.left + scrollx
        };
    },

    /* 添加样式名 */
    addClass: function(c, node) {
        if (!node) return;
        node.className = VCity._m.hasClass(c, node)
            ? node.className
            : node.className + " " + c;
    },

    /* 移除样式名 */
    removeClass: function(c, node) {
        var reg = new RegExp("(^|\\s+)" + c + "(\\s+|$)", "g");
        if (!VCity._m.hasClass(c, node)) return;
        node.className = reg.test(node.className)
            ? node.className.replace(reg, "")
            : node.className;
    },

    /* 是否含有CLASS */
    hasClass: function(c, node) {
        if (!node || !node.className) return false;
        return node.className.indexOf(c) > -1;
    },

    /* 阻止冒泡 */
    stopPropagation: function(event) {
        event = event || window.event;
        event.stopPropagation
            ? event.stopPropagation()
            : (event.cancelBubble = true);
    },
    /* 去除两端空格 */
    trim: function(str) {
        return str.replace(/^\s+|\s+$/g, "");
    }
};

/* 所有城市数据,可以按照格式自行添加（北京|beijing|bj），前16条为热门城市 */

VCity.allCity = [
    "北京|beijing|bj",
    "上海|shanghai|sh",
    "广州|guangzhou|gz",
    "深圳|shenzhen|sz",
    "南京|nanjing|nj",
    "杭州|hangzhou|hz",
    "天津|tianjin|tj",
    "重庆|chongqing|cq",
    "成都|chengdu|cd",
    "青岛|qingdao|qd",
    "苏州|shuzhou|sz",
    "无锡|wuxi|wx",
    "常州|changzhou|cz",
    "温州|wenzhou|wz",
    "武汉|wuhan|wh",
    "长沙|changsha|cs",
    "石家庄|shijiazhuang|sjz",
    "南昌|nanchang|nc",
    "三亚|sanya|sy",
    "合肥|hefei|hf",
    "郑州|zhengzhou|zz",
    "保定|baoding|bd",
    "唐山|tangshan|ts",
    "秦皇岛|qinhuangdao|qhd",
    "邯郸|handan|hd",
    "邢台|xingtai|xt",
    "张家口|zhangjiakou|zjk",
    "承德|chengde|cd",
    "衡水|hengshui|hs",
    "廊坊|langfang|lf",
    "沧州|cangzhou|cz",
    "太原|taiyuan|ty",
    "大同|datong|dt",
    "阳泉|yangquan|yq",
    "长治|changzhi|cz",
    "晋城|jincheng|jc",
    "朔州|shuozhou|sz",
    "晋中|jinzhong|jz",
    "运城|yuncheng|yc",
    "忻州|xinzhou|xz",
    "临汾|linfen|lf",
    "吕梁|lvliang|ll",
    "呼和浩特|huhehaote|hhht",
    "包头|baotou|bt",
    "乌海|wuhai|wh",
    "赤峰|chifeng|cf",
    "通辽|tongliao|tl",
    "鄂尔多斯|eerduosi|eeds",
    "呼伦贝尔|hulunbeier|hlbe",
    "巴彦淖尔|bayannaoer|byne",
    "乌兰察布|wulanchabu|wlcb",
    "兴安盟|xinganmeng|xam",
    "锡林郭勒盟|xilinguolemeng|xlglm",
    "阿拉善盟|alashanmeng|alsm",
    "沈阳|shenyang|sy",
    "大连|dalian|dl",
    "鞍山|anshan|as",
    "抚顺|fushun|fs",
    "本溪|benxi|bx",
    "丹东|dandong|dd",
    "锦州|jinzhou|jz",
    "营口|yingkou|yk",
    "阜新|fuxin|fx",
    "辽阳|liaoyang|ly",
    "盘锦|panjin|pj",
    "铁岭|tieling|tl",
    "朝阳|chaoyang|cy",
    "葫芦岛|huludao|hld",
    "长春|changchun|cc",
    "吉林|jilin|jl",
    "四平|siping|sp",
    "辽源|liaoyuan|ly",
    "通化|tonghua|th",
    "白山|baishan|bs",
    "松原|songyuan|sy",
    "白城|baicheng|bc",
    "延边朝鲜族自治州|ybcxzzzz|ybcxzzzz",
    "哈尔滨|haerbin|heb",
    "齐齐哈尔|qiqihaer|qqhe",
    "鸡西|jixi|jx",
    "鹤岗|hegang|hg",
    "双鸭山|shuangyashan|sys",
    "大庆|daqing|dq",
    "伊春|yichun|yc",
    "佳木斯|jiamusi|jms",
    "七台河|qitaihe|qth",
    "牡丹江|mudanjiang|mdj",
    "黑河|heihe|hh",
    "绥化|suihua|sh",
    "大兴安岭地区|daxinganling|dxaldq",
    "徐州|xuzhou|xz",
    "南通|nantong|nt",
    "连云港|lianyungang|lyg",
    "淮安|huaian|ha",
    "盐城|yancheng|yc",
    "扬州|yangzhou|yz",
    "镇江|zhenjiang|zj",
    "泰州|taizhou|tz",
    "宿迁|suqian|sq",
    "宁波|ningbo|nb",
    "嘉兴|jiaxing|jx",
    "湖州|huzhou|hz",
    "绍兴|shaoxing|sx",
    "舟山|zhoushan|zs",
    "衢州|quzhou|qz",
    "金华|jinhua|jh",
    "台州|taizhou|tz",
    "丽水|lishui|ls",
    "芜湖|wuhu|wh",
    "蚌埠|bengbu|bb",
    "淮南|huainan|hn",
    "马鞍山|maanshan|mas",
    "淮北|huaibei|hb",
    "铜陵|tongling|tl",
    "安庆|anqing|aq",
    "黄山|huangshan|hs",
    "滁州|chuzhou|cz",
    "阜阳|fuyang|fy",
    "宿州|suzhou|sz",
    "巢湖|chaohu|ch",
    "六安|luan|la",
    "亳州|bozhou|bz",
    "池州|chizhou|cz",
    "宣城|xuancheng|xc",
    "福州|fuzhou|fz",
    "厦门|xiamen|xm",
    "莆田|putian|pt",
    "三明|sanming|sm",
    "泉州|quanzhou|qz",
    "漳州|zhangzhou|zz",
    "南平|nanping|np",
    "龙岩|longyan|ly",
    "宁德|ningde|nd",
    "景德镇|jingdezhen|jdz",
    "萍乡|pingxiang|px",
    "九江|jiujiang|jj",
    "新余|xinyu|xy",
    "鹰潭|yingtan|yt",
    "赣州|ganzhou|gz",
    "吉安|jian|ja",
    "宜春|yichun|yc",
    "抚州|fuzhou|fz",
    "上饶|shangrao|sr",
    "济南|jinan|jn",
    "淄博|zibo|zb",
    "枣庄|zaozhuang|zz",
    "东营|dongying|dy",
    "烟台|yantai|yt",
    "潍坊|weifang|wf",
    "济宁|jining|jn",
    "泰安|taian|ta",
    "威海|weihai|wh",
    "日照|rizhao|rz",
    "莱芜|laiwu|lw",
    "临沂|linyi|ly",
    "德州|dezhou|dz",
    "聊城|liaocheng|lc",
    "滨州|binzhou|bz",
    "菏泽|heze|hz",
    "开封|kaifeng|kf",
    "洛阳|luoyang|ly",
    "平顶山|pingdingshan|pds",
    "安阳|anyang|ay",
    "鹤壁|hebi|hb",
    "新乡|xinxiang|xx",
    "焦作|jiaozuo|jz",
    "濮阳|puyang|py",
    "许昌|xuchang|xc",
    "漯河|luohe|lh",
    "三门峡|sanmenxia|smx",
    "南阳|nanyang|ny",
    "商丘|shangqiu|sq",
    "信阳|xinyang|xy",
    "周口|zhoukou|zk",
    "驻马店|zhumadian|zmd",
    "济源|jiyuan|jiyuan",
    "黄石|huangshi|hs",
    "十堰|shiyan|sy",
    "宜昌|yichang|yc",
    "襄樊|xiangfan|xf",
    "鄂州|ezhou|ez",
    "荆门|jingmen|jm",
    "孝感|xiaogan|xg",
    "荆州|jingzhou|jz",
    "黄冈|huanggang|hg",
    "咸宁|xianning|xn",
    "随州|suizhou|sz",
    "恩施土家族苗族自治州|estjzmzzzz|estjzmzzzz",
    "仙桃|xiantao|xt",
    "潜江|qianjiang|qj",
    "天门|tianmen|tm",
    "神农架林区|shennongjia|snjlq",
    "株洲|zhuzhou|zz",
    "湘潭|xiangtan|xt",
    "衡阳|hengyang|hy",
    "邵阳|shaoyang|sy",
    "岳阳|yueyang|yy",
    "常德|changde|cd",
    "张家界|zhangjiajie|zjj",
    "益阳|yiyang|yy",
    "郴州|chenzhou|cz",
    "永州|yongzhou|yz",
    "怀化|huaihua|hh",
    "娄底|loudi|ld",
    "湘西土家族苗族自治州|xxtjzmzzzz|xxtjzmzzzz",
    "韶关|shaoguan|sg",
    "珠海|zhuhai|zh",
    "汕头|shantou|st",
    "佛山|foushan|fs",
    "江门|jiangmen|jm",
    "湛江|zhanjiang|jz",
    "茂名|maoming|mm",
    "肇庆|zhaoqing|zq",
    "惠州|huizhou|hz",
    "梅州|meizhou|mz",
    "汕尾|shanwei|sw",
    "河源|heyuan|hy",
    "阳江|yangjiang|yj",
    "清远|qingyuan|qy",
    "东莞|dongguan|dg",
    "中山|zhongshan|zs",
    "潮州|chaozhou|cz",
    "揭阳|jieyang|jy",
    "云浮|yunfu|yf",
    "南宁|nanning|nn",
    "柳州|liuzhou|lz",
    "桂林|guilin|gl",
    "梧州|wuzhou|wz",
    "北海|beihai|bh",
    "防城港|fangchenggang|fcg",
    "钦州|qinzhou|qz",
    "贵港|guigang|gg",
    "玉林|yulin|yl",
    "百色|baise|bs",
    "贺州|hezhou|hz",
    "河池|hechi|hc",
    "来宾|laibin|lb",
    "崇左|chongzuo|cz",
    "海口|haikou|hk",
    "三亚|sanya|sy",
    "五指山|wuzhishan|wzs",
    "琼海|qionghai|qh",
    "儋州|danzhou|dz",
    "文昌|wenchang|wc",
    "万宁|wanning|wn",
    "东方|dongfang|df",
    "定安县|dingan|da",
    "屯昌县|tunchang|tc",
    "澄迈县|chengmai|cm",
    "临高县|lingao|lg",
    "白沙黎族自治县|bsnzzzx|bsnzzzx",
    "昌江黎族自治县|cjlzzzx|cjlzzzx",
    "乐东黎族自治县|ldlzzzx|ldlzzzx",
    "陵水黎族自治县|lingshui|ls",
    "保亭黎族苗族自治县|btlzmzzzx|btlzmzzzx",
    "琼中黎族苗族自治县|qzlzmzzzx|qzlzmzzzx",
    "西沙群岛|xishaqundao|xsqd",
    "南沙群岛|nanshaqundao|nsqd",
    "中沙群岛的岛礁及其海域|zhongshaqundao|zsqd",
    "自贡|zigong|zg",
    "攀枝花|panzhihua|pzh",
    "泸州|luzhou|lz",
    "德阳|deyang|dy",
    "绵阳|mianyang|my",
    "广元|guangyuan|gy",
    "遂宁|suining|sn",
    "内江|neijiang|nj",
    "乐山|leshan|ls",
    "南充|nanchong|nc",
    "眉山|meishan|ms",
    "宜宾|yibin|yb",
    "广安|guangan|ga",
    "达州|dazhou|dz",
    "雅安|yaan|ya",
    "巴中|bazhong|bz",
    "资阳|ziyang|zy",
    "阿坝藏族羌族自治州|abzzqzzzz|abzzqzzzz",
    "甘孜藏族自治州|gzzzzzz|gzzzzzz",
    "凉山彝族自治州|lsyzzzz|lsyzzzz",
    "贵阳|guiyang|gy",
    "六盘水|liupanshui|lps",
    "遵义|zunyi|zy",
    "安顺|anshun|as",
    "铜仁地区|tongren|tr",
    "黔西南布依族苗族自治州|qxnbyzmzzzz|qxnbyzmzzzz",
    "毕节地区|bijie|bj",
    "黔东南苗族侗族自治州|qdnmzdzzzz|qdnmzdzzzz",
    "黔南布依族苗族自治州|qnbyzmzzzz|qnbyzmzzzz",
    "昆明|kunming|km",
    "曲靖|qujing|qj",
    "玉溪|yuxi|yx",
    "保山|baoshan|bs",
    "昭通|zhaotong|zt",
    "丽江|lijiang|lj",
    "思茅|simao|sm",
    "临沧|lincang|lc",
    "楚雄彝族自治州|cxyzzzz|cxyzzzz",
    "红河哈尼族彝族自治州|hhhnzyzzzz|hhhnzyzzzz",
    "文山壮族苗族自治州|wszzmzzzz|wszzmzzzz",
    "西双版纳傣族自治州|xsbndzzzz|xsbndzzzz",
    "大理白族自治州|dlbzzzz|dlbzzzz",
    "德宏傣族景颇族自治州|dhdzjpzzzz|dhdzjpzzzz",
    "怒江傈僳族自治州|njlszzzz|njlszzzz",
    "迪庆藏族自治州|dqzzzzz|dqzzzzz",
    "拉萨|lasa|ls",
    "昌都地区|changdudiqu|cd",
    "山南地区|shannandiqu|sndq",
    "日喀则地区|rikazediqu|rkzdq",
    "那曲地区|naqudiqu|nqdq",
    "阿里地区|alidiqu|aldq",
    "林芝地区|linzhidiqu|lzdq",
    "西安|xian|xa",
    "铜川|tongchuan|tc",
    "宝鸡|baoji|bj",
    "咸阳|xianyang|xy",
    "渭南|weinan|wn",
    "延安|yanan|ya",
    "汉中|hanzhong|hz",
    "榆林|yulin|yl",
    "安康|ankang|ak",
    "商洛|shangluo|sl",
    "兰州|lanzhou|lz",
    "嘉峪关|jiayuguan|jyg",
    "金昌|jinchang|jc",
    "白银|baiyin|by",
    "天水|tianshui|ts",
    "武威|wuwei|ww",
    "张掖|zhangye|zy",
    "平凉|pingliang|pl",
    "酒泉|jiuquan|jq",
    "庆阳|qingyang|qy",
    "定西|dingxi|dx",
    "陇南|longnan|ln",
    "临夏回族自治州|lxhzzzz|lxhzzzz",
    "甘南藏族自治州|gnzzzzz|gnzzzzz",
    "西宁|xining|xn",
    "海东地区|haidongdiqu|hddq",
    "海北藏族自治州|hbzzzzz|hbzzzzz",
    "黄南藏族自治州|hnzzzzz|hnzzzzz",
    "海南藏族自治州|hnzzzzz|hnzzzzz",
    "果洛藏族自治州|glzzzzz|hlzzzzz",
    "玉树藏族自治州|yszzzzz|yszzzzz",
    "海西蒙古族藏族自治州|hxmgzzzzzz|hxmgzzzzzz",
    "银川|yinchuan|yc",
    "石嘴山|shizuishan|szs",
    "吴忠|wuzhong|wz",
    "固原|guyuan|gy",
    "中卫|zhongwei|zw",
    "乌鲁木齐|wulumuqi|wlmq",
    "克拉玛依|kelamayi|klmy",
    "吐鲁番地区|tulufandiqu|tlfdq",
    "哈密地区|hamidiqu|hmdq",
    "昌吉回族自治州|cjhzzzz|cjhzzzz",
    "博尔塔拉蒙古自治州|betlmgzzz|betlmgzzz",
    "巴音郭楞蒙古自治州|byglmgzzz|byglmgzzz",
    "阿克苏地区|akesudiqu|aksdq",
    "克孜勒苏柯尔克孜自治州|kzlskekzzzz|kzlskekzzzz",
    "喀什地区|kashidiqu|ksdq",
    "和田地区|hetian|ht",
    "伊犁哈萨克自治州|ylhskzzz|ylhskzzz",
    "塔城地区|tachengdiqu|tcdq",
    "阿勒泰地区|aletaidiqu|altdq",
    "石河子|shihezi|shz",
    "阿拉尔|alaer|ale",
    "图木舒克|tumushuke|tmsk",
    "五家渠|wujiaqu|wjq",
    "台北|taibei|tb",
    "高雄|gaoxiong|gx",
    "基隆|jilong|jl",
    "台中|taizhong|tz",
    "台南|tainan|tn",
    "新竹|xinzhu|xz",
    "嘉义|jiayi|jy",
    "台北县|taibeixian|tbx",
    "宜兰县|yilanxian|ylx",
    "桃园县|taoyuanxian|tyx",
    "新竹县|xinzhuxian|xzx",
    "苗栗县|miaolixian|mlx",
    "台中县|taizhongxian|tzx",
    "彰化县|zhanghuaxian|zhx",
    "南投县|nantouxian|ntx",
    "云林县|yunlinxian|ylx",
    "嘉义县|jiayixian|jyx",
    "台南县|tainanxian|tnx",
    "高雄县|gaoxiongxian|gxx",
    "屏东县|pingdongxian|pdx",
    "澎湖县|penghuxian|phx",
    "台东县|taidongxian|tdx",
    "花莲县|hualianxian|hlx",
    "中西区|zhongxiqu|zxq",
    "东区|dongqu|dq",
    "九龙城区|jiulongchengqu|jlcq",
    "观塘区|guantangqu|gtq",
    "南区|nanqu|nq",
    "深水埗区|shenshuibuqu|ssbq",
    "黄大仙区|huangdaxianqu|hdxq",
    "湾仔区|wanzaiqu|wzq",
    "油尖旺区|youjianwangqu|yjwq",
    "离岛区|lidaoqu|ldq",
    "葵青区|kuiqingqu|kqq",
    "北区|beiqu|bq",
    "西贡区|xigongqu|xgq",
    "沙田区|shatianqu|stq",
    "屯门区|tunmenqu|tmq",
    "大埔区|dabuqu|dbq",
    "荃湾区|quanwanqu|qwq",
    "元朗区|yuanlangqu|ylq",
    "花地玛堂区|huadimatangqu|hdmtq",
    "圣安多尼堂区|shenganduonitangqu|sadntq",
    "大堂区|datangqu|dtq",
    "望德堂区|wangdetangqu|wdtq",
    "风顺堂区|fengshuntangqu|fstq",
    "嘉模堂区|jiamotangqu|jmtq",
    "圣方济各堂区|shengfangjigetangqu|sfjgtq"
];

/* 正则表达式 筛选中文城市名、拼音、首字母 */

VCity.regEx = /^([\u4E00-\u9FA5\uf900-\ufa2d]+)\|(\w+)\|(\w)\w*$/i;
VCity.regExChiese = /([\u4E00-\u9FA5\uf900-\ufa2d]+)/;

/* *
 * 格式化城市数组为对象oCity，按照a-h,i-p,q-z,hot热门城市分组：
 * {HOT:{hot:[]},ABCDEFGH:{a:[1,2,3],b:[1,2,3]},IJKLMNOP:{i:[1.2.3],j:[1,2,3]},QRSTUVWXYZ:{}}
 * */
(function() {
    var citys = VCity.allCity,
        match,
        letter,
        regEx = VCity.regEx,
        reg2 = /^[a-b]$/i,
        reg3 = /^[c-d]$/i,
        reg4 = /^[e-g]$/i,
        reg5 = /^[h]$/i,
        reg6 = /^[j]$/i,
        reg7 = /^[k-l]$/i,
        reg8 = /^[m-p]$/i,
        reg9 = /^[q-r]$/i,
        reg10 = /^[s]$/i,
        reg11 = /^[t]$/i,
        reg12 = /^[w]$/i,
        reg13 = /^[x]$/i,
        reg14 = /^[y]$/i,
        reg15 = /^[z]$/i;
    if (!VCity.oCity) {
        VCity.oCity = {
            hot: {},
            AB: {},
            CD: {},
            EFG: {},
            H: {},
            J: {},
            KL: {},
            MNP: {},
            QR: {},
            S: {},
            T: {},
            W: {},
            X: {},
            Y: {},
            Z: {}
        };
        //console.log(citys.length);
        for (var i = 0, n = citys.length; i < n; i++) {
            match = regEx.exec(citys[i]);
            letter = match[3].toUpperCase();
            if (reg2.test(letter)) {
                if (!VCity.oCity.AB[letter]) VCity.oCity.AB[letter] = [];
                VCity.oCity.AB[letter].push(match[1]);
            } else if (reg3.test(letter)) {
                if (!VCity.oCity.CD[letter]) VCity.oCity.CD[letter] = [];
                VCity.oCity.CD[letter].push(match[1]);
            } else if (reg4.test(letter)) {
                if (!VCity.oCity.EFG[letter]) VCity.oCity.EFG[letter] = [];
                VCity.oCity.EFG[letter].push(match[1]);
            } else if (reg5.test(letter)) {
                if (!VCity.oCity.H[letter]) VCity.oCity.H[letter] = [];
                VCity.oCity.H[letter].push(match[1]);
            } else if (reg6.test(letter)) {
                if (!VCity.oCity.J[letter]) VCity.oCity.J[letter] = [];
                VCity.oCity.J[letter].push(match[1]);
            } else if (reg7.test(letter)) {
                if (!VCity.oCity.KL[letter]) VCity.oCity.KL[letter] = [];
                VCity.oCity.KL[letter].push(match[1]);
            } else if (reg8.test(letter)) {
                if (!VCity.oCity.MNP[letter]) VCity.oCity.MNP[letter] = [];
                VCity.oCity.MNP[letter].push(match[1]);
            } else if (reg9.test(letter)) {
                if (!VCity.oCity.QR[letter]) VCity.oCity.QR[letter] = [];
                VCity.oCity.QR[letter].push(match[1]);
            } else if (reg10.test(letter)) {
                if (!VCity.oCity.S[letter]) VCity.oCity.S[letter] = [];
                VCity.oCity.S[letter].push(match[1]);
            } else if (reg11.test(letter)) {
                if (!VCity.oCity.T[letter]) VCity.oCity.T[letter] = [];
                VCity.oCity.T[letter].push(match[1]);
            } else if (reg12.test(letter)) {
                if (!VCity.oCity.W[letter]) VCity.oCity.W[letter] = [];
                VCity.oCity.W[letter].push(match[1]);
            } else if (reg13.test(letter)) {
                if (!VCity.oCity.X[letter]) VCity.oCity.X[letter] = [];
                VCity.oCity.X[letter].push(match[1]);
            } else if (reg14.test(letter)) {
                if (!VCity.oCity.Y[letter]) VCity.oCity.Y[letter] = [];
                VCity.oCity.Y[letter].push(match[1]);
            } else if (reg15.test(letter)) {
                if (!VCity.oCity.Z[letter]) VCity.oCity.Z[letter] = [];
                VCity.oCity.Z[letter].push(match[1]);
            }

            /* 热门城市 前16条 */
            /*if(i<20){
                if(!VCity.oCity.hot['hot']) VCity.oCity.hot['hot'] = [];
                VCity.oCity.hot['hot'].push(match[1]);
                console.log(match[1]);
            }*/
        }

        VCity.oCity.hot["hot"] = [
            "全国",
            "广州",
            "上海",
            "北京",
            "深圳",
            "成都",
            "厦门",
            "南京",
            "海口",
            "杭州",
            "西安",
            "南昌",
            "西宁",
            "武汉",
            "福州",
            "重庆",
            "昆明",
            "贵阳",
            "无锡",
            "宁波",
            "天津",
            "长春",
            "郑州",
            "三亚",
            "青岛",
            "济南",
            "合肥",
            "沈阳",
            "大连",
            "长沙"
        ];
    }
})();

/* 城市HTML模板 */
VCity._template = [
    '<p class="tip">直接输入可搜索城市(支持汉字/拼音)</p>',
    "<ul>",
    '<li class="on">热门城市</li>',
    "<li>AB</li>",
    "<li>CD</li>",
    "<li>EFG</li>",
    "<li>H</li>",
    "<li>J</li>",
    "<li>KL</li>",
    "<li>MNP</li>",
    "<li>QR</li>",
    "<li>S</li>",
    "<li>T</li>",
    "<li>W</li>",
    "<li>X</li>",
    "<li>Y</li>",
    "<li>Z</li>",
    "</ul>"
];

/* *
 * 城市控件构造函数
 * @CitySelector
 * */

VCity.CitySelector = function() {
    this.initialize.apply(this, arguments);
};

VCity.CitySelector.prototype = {
    constructor: VCity.CitySelector,

    /* 初始化 */

    initialize: function(options, cbConfig) {
        var input = options.input;
        this.input = VCity._m.$("#" + input);
        this.inputEvent(cbConfig);
    },

    /* *
        

    /* *
     * @createWarp
     * 创建城市BOX HTML 框架
     * */

    createWarp: function(cbConfig) {
        var inputPos = VCity._m.getPos(this.input);
        var div = (this.rootDiv = document.createElement("div"));
        var that = this;

        // 设置DIV阻止冒泡
        VCity._m.on(this.rootDiv, "click", function(event) {
            VCity._m.stopPropagation(event);
        });

        // 设置点击文档隐藏弹出的城市选择框
        VCity._m.on(document, "click", function(event) {
            event = VCity._m.getEvent(event);
            var target = VCity._m.getTarget(event);
            if (target == that.input) return false;
            //console.log(target.className);
            if (that.cityBox) VCity._m.addClass("hide", that.cityBox);
            if (that.ul) VCity._m.addClass("hide", that.ul);
            if (that.myIframe) VCity._m.addClass("hide", that.myIframe);
        });
        div.className = "citySelector";
        div.style.position = "absolute";
        div.style.left =
            inputPos.left +
            (cbConfig && cbConfig.offsetLeft ? cbConfig.offsetLeft : 0) +
            "px";
        div.style.top = inputPos.bottom + 5 + "px";
        div.style.zIndex = 999999;

        // 判断是否IE6，如果是IE6需要添加iframe才能遮住SELECT框
        var isIe = document.all ? true : false;
        var isIE6 = (this.isIE6 = isIe && !window.XMLHttpRequest);
        if (isIE6) {
            var myIframe = (this.myIframe = document.createElement("iframe"));
            myIframe.frameborder = "0";
            myIframe.src = "about:blank";
            myIframe.style.position = "absolute";
            myIframe.style.zIndex = "-1";
            this.rootDiv.appendChild(this.myIframe);
        }

        var childdiv = (this.cityBox = document.createElement("div"));
        childdiv.className = "cityBox";
        childdiv.id = "cityBox";
        //无文本时删掉搜索提示
        if (cbConfig.noInput) {
            VCity._m.addClass("zen_p-t-3", childdiv);
            if (VCity._template[0].indexOf("<p") > -1) {
                VCity._template.shift(0);
            }
        }
        childdiv.innerHTML = VCity._template.join("");
        var hotCity = (this.hotCity = document.createElement("div"));
        hotCity.className = "hotCity";
        childdiv.appendChild(hotCity);
        div.appendChild(childdiv);
        this.createHotCity(cbConfig);
    },

    /* *
     * @createHotCity
     * TAB下面DIV：hot,a-h,i-p,q-z 分类HTML生成，DOM操作
     * {HOT:{hot:[]},ABCDEFGH:{a:[1,2,3],b:[1,2,3]},IJKLMNOP:{},QRSTUVWXYZ:{}}
     **/

    createHotCity: function(cbConfig) {
        var odiv,
            odl,
            odt,
            odd,
            odda = [],
            str,
            key,
            ckey,
            sortKey,
            regEx = VCity.regEx,
            oCity = VCity.oCity;
        for (key in oCity) {
            odiv = this[key] = document.createElement("div");
            // 先设置全部隐藏hide
            odiv.className = key + " " + "cityTab hide";
            sortKey = [];
            for (ckey in oCity[key]) {
                sortKey.push(ckey);
                // ckey按照ABCDEDG顺序排序
                sortKey.sort();
            }
            for (var j = 0, k = sortKey.length; j < k; j++) {
                odl = document.createElement("dl");
                odt = document.createElement("dt");
                odd = document.createElement("dd");
                odt.innerHTML = sortKey[j] == "hot" ? "&nbsp;" : sortKey[j];
                odda = [];
                for (var i = 0, n = oCity[key][sortKey[j]].length; i < n; i++) {
                    str =
                        '<a href="javascript:">' +
                        oCity[key][sortKey[j]][i] +
                        "</a>";
                    odda.push(str);
                }
                odd.innerHTML = odda.join("");
                odl.appendChild(odt);
                odl.appendChild(odd);
                odiv.appendChild(odl);
            }

            // 移除热门城市的隐藏CSS
            VCity._m.removeClass("hide", this.hot);
            this.hotCity.appendChild(odiv);
        }
        document.body.appendChild(this.rootDiv);
        /* IE6 */
        this.changeIframe();

        this.tabChange();
        this.linkEvent(cbConfig);
    },

    /* *
     *  tab按字母顺序切换
     *  @ tabChange
     * */

    tabChange: function() {
        var lis = VCity._m.$("li", this.cityBox);
        var divs = VCity._m.$("div", this.hotCity);
        var that = this;
        for (var i = 0, n = lis.length; i < n; i++) {
            lis[i].index = i;
            lis[i].onclick = function() {
                for (var j = 0; j < n; j++) {
                    VCity._m.removeClass("on", lis[j]);
                    VCity._m.addClass("hide", divs[j]);
                }
                VCity._m.addClass("on", this);
                VCity._m.removeClass("hide", divs[this.index]);
                /* IE6 改变TAB的时候 改变Iframe 大小*/
                that.changeIframe();
            };
        }
    },

    /* *
     * 城市LINK事件
     *  @linkEvent
     * */

    linkEvent: function(cbConfig) {
        var links = VCity._m.$("a", this.hotCity);
        var that = this;
        for (var i = 0, n = links.length; i < n; i++) {
            links[i].onclick = function() {
                that.input.value = this.innerHTML;
                cbConfig &&
                    cbConfig.onChange &&
                    cbConfig.onChange(that.input.value);
                VCity._m.addClass("hide", that.cityBox);
                /* 点击城市名的时候隐藏myIframe */
                VCity._m.addClass("hide", that.myIframe);
            };
        }
    },

    /* *
     * INPUT城市输入框事件
     * @inputEvent
     * */

    inputEvent: function(cbConfig) {
        var that = this;
        VCity._m.on(this.input, "click", function(event) {
            event = event || window.event;
            if (!that.cityBox) {
                that.createWarp(cbConfig);
            } else if (
                !!that.cityBox &&
                VCity._m.hasClass("hide", that.cityBox)
            ) {
                //rebuild the position
                var inputPos = VCity._m.getPos(that.input);
                that.rootDiv.style.left =
                    inputPos.left +
                    (cbConfig && cbConfig.offsetLeft
                        ? cbConfig.offsetLeft
                        : 0) +
                    "px";
                that.rootDiv.style.top = inputPos.bottom + 5 + "px";
                // slideul 不存在或者 slideul存在但是是隐藏的时候 两者不能共存
                if (
                    !that.ul ||
                    (that.ul && VCity._m.hasClass("hide", that.ul))
                ) {
                    VCity._m.removeClass("hide", that.cityBox);

                    /* IE6 移除iframe 的hide 样式 */
                    //alert('click');
                    VCity._m.removeClass("hide", that.myIframe);
                    that.changeIframe();
                }
            }
        });

        // VCity._m.on(this.input,'focus',function(){
        //     that.input.select();
        //     if(that.input.value == '城市名') that.input.value = '';
        // });
        VCity._m.on(this.input, "blur", function() {
            // if(that.input.value == '') that.input.value = '城市名';

            var value = VCity._m.trim(that.input.value);
            if (value != "") {
                var reg = new RegExp("^" + value + "|\\|" + value, "gi");
                var flag = 0;
                for (var i = 0, n = VCity.allCity.length; i < n; i++) {
                    if (reg.test(VCity.allCity[i])) {
                        flag++;
                    }
                }
                if (flag == 0) {
                    that.input.value = "";
                } else {
                    var lis = VCity._m.$("li", that.ul);
                    if (typeof lis == "object" && lis["length"] > 0) {
                        var li = lis[0];
                        var bs = li.children;
                        if (bs && bs["length"] > 1) {
                            that.input.value = bs[0].innerHTML;
                        }
                    } else {
                        that.input.value = "";
                    }
                }
            }
        });
        VCity._m.on(this.input, "keyup", function(event) {
            event = event || window.event;
            var keycode = event.keyCode;
            VCity._m.addClass("hide", that.cityBox);
            that.createUl(cbConfig);

            /* 移除iframe 的hide 样式 */
            VCity._m.removeClass("hide", that.myIframe);

            // 下拉菜单显示的时候捕捉按键事件
            if (
                that.ul &&
                !VCity._m.hasClass("hide", that.ul) &&
                !that.isEmpty
            ) {
                that.KeyboardEvent(event, keycode, cbConfig);
            }
        });
    },

    /* *
     * 生成下拉选择列表
     * @ createUl
     * */

    createUl: function(cbConfig) {
        //console.log('createUL');
        var str;
        var value = VCity._m.trim(this.input.value);
        // 当value不等于空的时候执行
        if (value !== "") {
            var reg = new RegExp("^" + value + "|\\|" + value, "gi");
            // 此处需设置中文输入法也可用onpropertychange
            var searchResult = [];
            for (var i = 0, n = VCity.allCity.length; i < n; i++) {
                if (reg.test(VCity.allCity[i])) {
                    var match = VCity.regEx.exec(VCity.allCity[i]);
                    if (searchResult.length !== 0) {
                        str =
                            '<li><b class="cityname">' +
                            match[1] +
                            '</b><b class="cityspell">' +
                            match[2] +
                            "</b></li>";
                    } else {
                        str =
                            '<li class="on"><b class="cityname">' +
                            match[1] +
                            '</b><b class="cityspell">' +
                            match[2] +
                            "</b></li>";
                    }
                    searchResult.push(str);
                }
            }
            this.isEmpty = false;
            // 如果搜索数据为空
            if (searchResult.length == 0) {
                this.isEmpty = true;
                str =
                    '<li class="empty">对不起，没有找到 "<em>' +
                    value +
                    '</em>"</li>';
                searchResult.push(str);
            }
            // 如果slideul不存在则添加ul
            if (!this.ul) {
                var ul = (this.ul = document.createElement("ul"));
                ul.className = "cityslide mCustomScrollbar";
                this.rootDiv && this.rootDiv.appendChild(ul);
                // 记录按键次数，方向键
                this.count = 0;
            } else if (this.ul && VCity._m.hasClass("hide", this.ul)) {
                this.count = 0;
                VCity._m.removeClass("hide", this.ul);
            }
            this.ul.innerHTML = searchResult.join("");

            /* IE6 */
            this.changeIframe();

            // 绑定Li事件
            this.liEvent(cbConfig);
        } else {
            VCity._m.addClass("hide", this.ul);
            VCity._m.removeClass("hide", this.cityBox);

            VCity._m.removeClass("hide", this.myIframe);

            this.changeIframe();
        }
    },

    /* IE6的改变遮罩SELECT 的 IFRAME尺寸大小 */
    changeIframe: function() {
        if (!this.isIE6) return;
        this.myIframe.style.width = this.rootDiv.offsetWidth + "px";
        this.myIframe.style.height = this.rootDiv.offsetHeight + "px";
    },

    /* *
     * 特定键盘事件，上、下、Enter键
     * @ KeyboardEvent
     * */

    KeyboardEvent: function(event, keycode, cbConfig) {
        var lis = VCity._m.$("li", this.ul);
        var len = lis.length;
        switch (keycode) {
            case 40: //向下箭头↓
                this.count++;
                if (this.count > len - 1) this.count = 0;
                for (var i = 0; i < len; i++) {
                    VCity._m.removeClass("on", lis[i]);
                }
                VCity._m.addClass("on", lis[this.count]);
                break;
            case 38: //向上箭头↑
                this.count--;
                if (this.count < 0) this.count = len - 1;
                for (i = 0; i < len; i++) {
                    VCity._m.removeClass("on", lis[i]);
                }
                VCity._m.addClass("on", lis[this.count]);
                break;
            case 13: // enter键
                this.input.value = VCity.regExChiese.exec(
                    lis[this.count].innerHTML
                )[0];
                cbConfig &&
                    cbConfig.onChange &&
                    cbConfig.onChange(this.input.value);
                VCity._m.addClass("hide", this.ul);
                VCity._m.addClass("hide", this.ul);
                /* IE6 */
                VCity._m.addClass("hide", this.myIframe);
                break;
            default:
                break;
        }
    },

    /* *
     * 下拉列表的li事件
     * @ liEvent
     * */

    liEvent: function(cbConfig) {
        var that = this;
        var lis = VCity._m.$("li", this.ul);
        for (var i = 0, n = lis.length; i < n; i++) {
            VCity._m.on(lis[i], "click", function(event) {
                event = VCity._m.getEvent(event);
                var target = VCity._m.getTarget(event);
                that.input.value = VCity.regExChiese.exec(target.innerHTML)[0];
                cbConfig &&
                    cbConfig.onChange &&
                    cbConfig.onChange(that.input.value);
                VCity._m.addClass("hide", that.ul);
                /* IE6 下拉菜单点击事件 */
                VCity._m.addClass("hide", that.myIframe);
            });
            VCity._m.on(lis[i], "mouseover", function(event) {
                event = VCity._m.getEvent(event);
                var target = VCity._m.getTarget(event);
                VCity._m.addClass("on", target);
            });
            VCity._m.on(lis[i], "mouseout", function(event) {
                event = VCity._m.getEvent(event);
                var target = VCity._m.getTarget(event);
                VCity._m.removeClass("on", target);
            });
        }
    }
};

export default VCity;
